<template>
    <div>
        <input type="text" v-model="title" @keydown.enter="addTodo"/>
        <button @click="clear">清理</button>

        <template v-if="todos.length">
            <transition-group name="flip-list" tag="ul">
                <li v-for="(todo, index) in todos" :key="index">
                    <input type="checkbox" v-model="todo.done"/>
                    <span :class="{ done: todo.done }">{{ todo.title }}</span>
                    <span class="remove-btn" @click="removeTodo(i)">
                        ❌
                    </span>
                </li>
            </transition-group>
        </template>
        <!-- <div v-else>暂无数据</div> -->
        <div>
            全选<input type="checkbox" v-model="allDone"/>
            <span>{{ active }} / {{ all }}</span>
        </div>
    </div>

    <transition name="modal">
        <div class="info-wrapper" v-if="showModal">
            <div class="info">没有内容啊！</div>
        </div>
    </transition>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStorage } from '@/utils'

let title = ref('')
let todos = useStorage('todos', [])
let showModal = ref(false)

function addTodo() {
    if (!title.value) {
        showModal.value = true
        setTimeout(() => {
            showModal.value = false
        }, 1500)
        return
    }

    todos.value.push({
        title: title.value,
        done: false
    })
    title.value = ''
}
function removeTodo(index) {
    todos.value.splice(index, 1)
}

function clear() {
    todos.value = todos.value.filter(v => !v.done)
}

let active = computed(() => {
    return todos.value.filter(v => !v.done).length
})
let all = computed(() => todos.value.length)
let allDone = computed({
    get() {
        return active.value === 0
    },
    set(value) {
        todos.value.forEach(todo => {
            todo.done = value
        })
    }
})
</script>

<style lang="less">
ul {
    list-style: none;

    li span.done {
        text-decoration: line-through;
    }

    .remove-btn {
        color: darkred;
        cursor: pointer;
    }
}

.info-wrapper {
    position: fixed;
    top: 20px;
    width: 200px;

    .info {
        padding: 20px;
        color: #fff;
        border-radius: 5px;
        background-color: rgba(#d88986, .8);
    }
}
.modal-enter-active,
.modal-leave-active {
    transition: all .5s ease;
}
.modal-enter-from,
.modal-leave-to {
    opacity: 0;
    transform: translateY(-60px);
}

.flip-list-move {
    transition: transform .8s ease;
}
.flip-list-enter-active,
.flip-list-leave-active {
    transition: all 1s ease;
}
.flip-list-enter-from,
.flip-list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>